<template>
	 <view class="w100p common_wrap no-bg">
        <CommonHeader :title="$t('赢取积分')" ></CommonHeader>
		
        <view class="tabs">
            <view :class="{tab: true,active: currentType == index}" 
            v-for="(item,index) in tabList" :key="index" @click="onTap(item.id,index)">
                {{ item[plang('title')] }}
                <view class="line"></view>
            </view>
        </view>
		<view class="w100p pr list_block">
            <rich-text :nodes="content" ></rich-text>
        </view>

	
	</view>
</template>

<script>
    import { tutorialCategory,tutorialText } from '@/api/basic'
    import CommonHeader from "@/pages/components/common-header.vue";
	export default {
        components: {
            CommonHeader
            },
		data() {
			return {
                currentType: 0,
				statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
                // tabList: [{
                //     title: this.$t('赢取规则'),
                //     type: 1,
                //     },{
                //     title: this.$t('新注册供应商'),
                //     type: 2,
                //     }],
                tabList:[],
                content:'',
                tutorial_id:null
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			getData(){
                tutorialCategory().then(res => {
					this.tabList =  res.data.data.list
                    this.tutorial_id =  res.data.data.list[0].id
                    this.getText( )
                })
               
            },
            getText(){
                tutorialText({
                    tutorial_id:this.tutorial_id
                }).then(res => {
                  if(this.langR == 'zh'){
                    this.content =  this.escapeHtml(res.data.data.text)
                  }else{
                    this.content =  this.escapeHtml(res.data.data.text_ru)
                  }
				  	  
                    
                })
            }, 
             // 处理方法
             escapeHtml(str) {
                var arrEntities = {
                    'lt': '<',
                    'gt': '>',
                    'nbsp': ' ',
                    'amp': '&',
                    'quot': '"'
                };
                return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
                    return arrEntities[t];
                });
            },

            onTap(type,index) {
                this.tutorial_id = type
                this.currentType = index;
                setTimeout(() => {
                this.getText();
                }, 300);
            }
		}
	}
</script>

<style lang="scss">
	@import '@/assets/appScss.scss';
	page {
		background-color: #F6F7FB;
	}
	.titleStyPOs {
		position: fixed;
		background-color: #F6F7FB;
		width: 100%;
		z-index: 10;
	}
	.e_content{
		width: 702rpx;
		height: 100%;
		margin:50rpx auto ;
		// padding-top: 50rpx;
		
	}
    .list_block {
  padding: 0 24rpx;
  flex: 1;
  overflow: hidden;
  background-color: #F6F7FB;
  scroll-view {
    height: 100%;
    overflow: hidden;
  }
}

    .tabs {
  height: 86rpx;
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  .tab {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #262728;
    font-size: 28rpx;
    font-weight: 400;
    &.active {
      color: #007AFF;
    }
    .line {
      width: 83rpx;
      height: 6rpx;
      border-radius: 3rpx;
      position: absolute;
      bottom: 10rpx;
      left: 50%;
      transform: translateX(-50%);
    }
    &.active {
      .line {
        background: #007AFF;
      }
    }
  }
}
</style>
